<template>
  <div>
    <el-card>
      <div slot="header">
        <span>资源管理</span>
      </div>
      <!-- 资源列表主体区域 -->
      <div>
        <div class="article_header">
          <div class="ah_left">
            <el-select v-model="getartlistQuery.state" clearable placeholder="请选择" @change="differentstate">
              <el-option label="已发布" value="1">
              </el-option>
              <el-option label="草稿" value="0">
              </el-option>
            </el-select>
          </div>

          <div class="ah_right">
            <el-input placeholder="请输入内容" v-model="reskey" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="searchkey"></el-button>
            </el-input>
          </div>
        </div>
        <!-- 资源列表主体区域 -->
        <div class="article_main">
          <el-table :data="articlelist.records" border style="width: 100%">
            <el-table-column fixed type="index" label="#">
            </el-table-column>
            <el-table-column label="文章名称">
              <template slot-scope="scope">
                <span class="text_over">{{scope.row.title}}</span>
              </template>
            </el-table-column>
            <el-table-column label="所属分类" width="140">
              <template slot-scope="scope">
                <i :class="scope.row.category.className"></i>
                <span>&nbsp;&nbsp;{{scope.row.category.title}}</span>
              </template>
            </el-table-column>
            <el-table-column label="作者">
              <template slot-scope="scope">
                <span class="text_over">{{scope.row.author.nickName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.state == 1">已发布</span>
                <span v-else>草稿</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180">
              <template slot-scope="scope">
                <span>{{scope.row.createAt|dateFormat}}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="goModify(scope.row._id)">修改</el-button>
                <el-button type="danger" size="small" @click="deleteart(scope.row._id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paging_box" id="searchkey">
          <el-pagination background @current-change="handleCurrentChange" :current-page="articlelist.page" :page-size="6" layout="total, prev, pager, next" :total="articlelist.total">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 不同要求不同列表所用信息
      getartlistQuery: {
        state: ''
      },
      // 搜索关键字
      reskey: '',
      // 获取资源列表
      articlelist: {},
      // 获取资源分类
      categorieslist: []
    }
  },
  created() {
    this.getcategorieslist()
    this.getarticlelist()
  },
  methods: {
    // 获取资源分类信息
    async getcategorieslist() {
      const res = await this.$http.get('/categories')
      // console.log(res.data)
      this.categorieslist = res.data
    },
    // 获取资源列表
    async getarticlelist() {
      // const formdate = this.$qs.stringify(this.getartlistQuery)
      const res = await this.$http({
        method: 'get',
        url: '/posts'
      })
      if (res.status !== 200) {
        this.$message({
          showClose: true,
          message: '获取资源列表失败！',
          type: 'error'
        })
      }
      // console.log(res.data)
      this.articlelist = res.data
    },
    // 当前在第几页
    async handleCurrentChange(newpage) {
      // this.getartlistQuery.page = newpage
      // console.log(typeof (newpage))
      const res = await this.$http({
        method: 'get',
        url: '/posts/',
        params: {
          page: newpage
        }
      })
      // console.log(res)
      if (res.status !== 200) {
        this.$message({
          showClose: true,
          message: '获取资源列表失败！',
          type: 'error'
        })
      }
      this.articlelist = res.data
    },
    // 获取不同状态的资源
    async differentstate() {
      const res = await this.$http({
        method: 'get',
        url: '/posts/',
        params: {
          state: this.getartlistQuery.state
        }
      })
      if (res.status !== 200) {
        this.$message({
          showClose: true,
          message: '获取资源列表失败！',
          type: 'error'
        })
      }
      this.articlelist = res.data
    },
    // 搜索关键
    async searchkey() {
      const res = await this.$http({
        method: 'get',
        url: '/posts/search/' + this.reskey
      })
      // console.log(res)
      this.articlelist.records = res.data
      document.getElementById('searchkey').style.display = 'none'
    },
    // 前往修改
    goModify(id) {
      window.sessionStorage.setItem('mdyresID', JSON.stringify(id))
      this.$router.push('/mdyresources')
    }
  }
}
</script>

<style scoped>
.article_main {
  margin-bottom: 30px;
}

.text_over {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.article_header {
  display: flex;
  margin-bottom: 15px;
}

.ah_right {
  margin-left: 30px;
}
</style>
